<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/info.css}">
    <script th:src="@{/js/layui.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/address.js}"></script>
</head>
<body>


<div id="container" class="layui-fluid">


    <div class="layui-row box">
        <div class="layui-col-md4 layui-col-xs4 tmp">
            <input id="ig" type="file" hidden name="userImage" v-on:change="change($event)">
            <img class="layui-nav-img image layui-col-md-offset6 layui-col-xs-offset6" v-bind:src="src" @click="click">
        </div>
    </div>

    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label>昵称</label>
        </div>
        <div class="layui-col-md4 layui-col-xs4">
            <div>
                <input class="layui-input" type="text" name="name" v-model="name" placeholder="姓名(必选项)">
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label>性别</label>
        </div>
        <div class="layui-col-md4 layui-col-xs4">
            <div id="sex" class="layui-col-space9">
                <div class="layui-col-md2 layui-col-xs2">
                    <input type="radio" name="sex" value="男" v-model="sex"><span>男</span>
                </div>
                <div class="layui-col-md1 layui-col-xs1">
                    <input type="radio" name="sex" value="女" v-model="sex"><span>女</span>
                </div>
            </div>

        </div>

    </div>


    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label>地址</label>
        </div>

        <div class="layui-col-md8 layui-col-xs8">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md2 layui-col-xs2">
                    <select name="province" v-model="province" v-on:change="getCity" lay-filter="city">
                        <option v-for="province in add" :value="province.name">
                            {{province.name}}
                        </option>
                    </select>
                </div>

                <div v-if="citys != null" class="layui-col-md2 layui-col-xs2">
                    <select name="city" v-model="cityValue" v-on:change="getDowntown">
                        <option v-for="item in citys" :value="item.name">
                            {{item.name}}
                        </option>
                    </select>
                </div>

                <div v-if="downtown != null" class="layui-col-md2 layui-col-xs2">
                    <select name="downtown" v-model="downtownValue">
                        <option v-for="item in downtown" :value="item">
                            {{item}}
                        </option>
                    </select>
                </div>

                <div class="layui-col-md4 layui-col-xs4">
                    <input class="layui-input" type="text" name="exact" v-model="exact" placeholder="具体到家庭住址(必选项)">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label>家庭电话</label>
        </div>
        <div class="layui-col-md4 layui-col-xs4">
            <div>
                <input class="layui-input" type="text" name="name" v-model="homePhone" placeholder="家庭电话(非必选项)">
            </div>

        </div>
    </div>


    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label>公司电话</label>
        </div>
        <div class="layui-col-md4 layui-col-xs4">
            <div>
                <input class="layui-input" type="text" name="name" v-model="workPhone" placeholder="公司电话(非必选项)">
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md1 layui-col-xs1">
            <label id="phone">手机号码</label>
        </div>
        <div class="layui-col-md5 layui-col-xs5">
            <div class="layui-row layui-col-space8" v-for="phone in phones">
                <div class="layui-col-md9 layui-col-xs9 phone-box">
                    <input class="layui-input" readonly type="text" name="phoneNumbers" v-bind:value="phone.phoneNumber">
                </div>
                <div class="layui-col-md1 layui-col-xs1">
                    <button type="button" class="layui-btn  layui-btn-primary layui-btn-xs nt"
                            @click="deletePhoneNumber($event)">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>
            </div>
            <div class="layui-row layui-col-space8">
                <div id="create" class="layui-col-md9 layui-col-xs9 phone-box">
                    <input class="layui-input" type="text" name="phoneNumbers" v-model="number" placeholder="个人手机号码(必选项)">
                </div>
                <div class="layui-col-md1 layui-col-xs1">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs nt" @click="addPhoneNumber">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>

        </div>
    </div>


    <div class="layui-row">
        <div class="layui-col-md1 layui-col-xs1 layui-col-md-offset1 layui-col-xs-offset1">
            <button type="button" class="layui-btn  layui-btn-radius bbt layui-btn-normal" @click="submit">保存</button>
        </div>
        <div class="layui-col-md1 layui-col-xs1 layui-col-md-offset1 layui-col-xs-offset1">
            <button type="button" class="layui-btn  layui-btn-radius bbt layui-btn-normal" @click="reverse">取消</button>
        </div>
    </div>

</div>


</body>

<script th:inline="javascript">


    var vue = new Vue({
        el: '#container',
        data: {
            user: [[${session.user}]],
            add: provices,
            name: '',
            sex: '',
            address: '',
            province: '',
            citys: null,
            cityValue: '',
            downtown: null,
            downtownValue: null,
            exact: '',
            homePhone: '',
            workPhone: '',
            phones: [],
            number: '',
            src: '',
            file: null
        },
        methods: {
            getCity: function () {

                for (var i = 0; i < this.add.length; i++) {
                    if (this.add[i].name == this.province) {

                        if (this.add[i].city.length == 1 && this.add[i].city[0].name == this.add[i].name) {
                            this.downtown = this.add[i].city[0].districtAndCounty;
                            this.downtownValue = '';
                            this.citys = null;
                            this.cityValue = '';
                            this.exact = '';
                            return
                        }

                        this.citys = this.add[i].city;
                        this.cityValue = '';
                        this.downtown = null;
                        this.downtownValue = '';
                        this.exact = '';
                        break;

                    }
                }
            },
            getDowntown: function () {

                if (this.citys == null) {
                    return;
                }
                var flag = true;
                for (var i = 0; i < this.add.length; i++) {
                    if (this.add[i].name == this.province) {
                        var city = this.add[i].city;
                        for (var j = 0; j < city.length; j++) {
                            if (city[j].name == this.cityValue) {
                                this.downtown = city[j].districtAndCounty;
                                if (this.downtown.length == 0) {
                                    this.downtown = null;
                                }

                                if (this.downtown.length == 1 && this.downtown[0] == this.cityValue) {
                                    this.downtown = null;
                                }
                                this.downtownValue = '';
                                this.exact = '';
                                flag = false;
                                break;
                            }
                        }
                    }
                    if (!flag) {
                        break
                    }

                }
            },
            addPhoneNumber: function () {

                let pattern = /^\d{11}$/;

                var b = pattern.test(this.number + "");
                if (!b) {
                    var str = "输入正确的手机号码!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }

                this.phones.push({"phoneNumber": this.number + ""})
                this.number = '';
            },
            deletePhoneNumber: function (event) {
                var value = event.currentTarget.parentElement.previousElementSibling.firstChild.value;
                var array = new Array();
                for (var i = 0; i < this.phones.length; i++) {

                    if (this.phones[i].phoneNumber == value) {
                        continue;
                    } else {
                        array.push(this.phones[i])
                    }
                }

                this.phones = array;
            },
            click: function () {
                var upload = document.getElementById("ig");
                upload.click();
            },
            change: function (event) {
                let reader = new FileReader();
                vue.$data.file = event.currentTarget.files[0];
                console.log(vue.$data.file)
                reader.readAsDataURL(event.currentTarget.files[0]);
                reader.onload = function (e) {
                    vue.$data.src = this.result;
                }
            },
            submit: function () {

                if (this.name.trim().length == 0) {

                    var str = "请填写姓名!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }
                if (this.sex == '') {
                    var str = "请填写性别!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }
                if (this.exact == '' || this.province == '' || (this.cityValue == '' && this.downtownValue == '')) {
                    var str = "请填写家庭住址!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }
                if (this.phones.length == 0) {
                    var str = "请填写手机号码!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }


                var data = new FormData();

                //发送put请求
                data.append("_method", "put");
                // console.log(data.get("_method"));

                data.append("id", this.user.id);

                if (this.file != null) {
                    data.append("image", this.file);
                    // console.log(this.file);
                }

                data.append("name", this.name);
                // console.log(this.name);
                data.append("sex", this.sex);
                // console.log(this.sex);

                if (this.cityValue == '') {
                    this.address = this.province + "," + this.downtownValue + "," + this.exact;
                } else {
                    if (this.downtownValue == '') {
                        this.address = this.province + "," + this.cityValue + "," + this.exact;
                    } else {
                        this.address = this.province + "," + this.cityValue + "," + this.downtownValue + "," + this.exact;
                    }
                }
                data.append("address", this.address);
                // console.log(this.address);
                for (var i = 0; i < this.phones.length; i++) {
                    data.append("phones", this.phones[i].phoneNumber);
                }

                // console.log(data.get("phones"));


                var pattern = /^\d{8}$/;
                if (this.workPhone != '') {
                    if (!pattern.test(this.workPhone)) {
                        var str = "请填写正确的公司电话!"
                        layer.alert(str, {
                            time: 3000
                        })
                        return;
                    }
                    data.append("workPhone", this.workPhone);
                }

                if (this.homePhone != '') {
                    if (!pattern.test(this.homePhone)) {
                        var str = "请填写正确的家庭电话!"
                        layer.alert(str, {
                            time: 3000
                        })
                        return;
                    }
                    data.append("homePhone", this.homePhone);
                }


                axios({
                    url: 'http://localhost:8080/userr',
                    method: 'post',
                    data: data
                }).then((response) => {
                    parent.v.$data.imageSrc = response.data.picture;
                    parent.v.$data.name = response.data.name;
                    var str = "保存成功!"
                    layer.alert(str, {
                        time: 3000
                    })
                })
            },
            reverse:function () {

                this.user = [[${session.user}]];
                this.name = this.user.name;
                this.sex = this.user.sex;
                this.address = this.user.address;
                this.workPhone = this.user.workPhone;

                this.homePhone = this.user.homePhone;
                this.phones = this.user.phones;
                this.file = null;
                this.src = 'http://localhost:8080/pictures/' + this.user.picture;

                if (this.address == '') {
                    return;
                }
                var strings = this.address.split(",");

                if (strings.length == 3) {
                    this.province = strings[0];
                    this.getCity();
                    if (this.citys != null) {
                        this.cityValue = strings[1];
                    } else {
                        this.downtownValue = strings[1];
                    }

                    this.exact = strings[2];
                } else if (strings.length == 4) {
                    this.province = strings[0];
                    this.getCity();
                    this.cityValue = strings[1];
                    this.getDowntown();
                    this.downtownValue = strings[2];
                    this.exact = strings[3];
                }
            }
        },
        mounted: function () {


            if (this.user.chicken == true) {
                layer.alert('请先完善个人信息，才能进行之后的查询！', {
                    skin: 'layui-layer-molv' //样式类名
                    ,closeBtn: 0
                });
            }


            this.name = this.user.name;
            this.sex = this.user.sex;
            this.address = this.user.address;
            this.workPhone = this.user.workPhone;

            this.homePhone = this.user.homePhone;
            this.phones = this.user.phones;
            console.log(this.user.picture)
            this.src = 'http://localhost:8080/pictures/' + this.user.picture;

            if (this.address == '') {
                return;
            }
            var strings = this.address.split(",");

            if (strings.length == 3) {
                this.province = strings[0];
                this.getCity();
                if (this.citys != null) {
                    this.cityValue = strings[1];
                } else {
                    this.downtownValue = strings[1];
                }

                this.exact = strings[2];
            } else if (strings.length == 4) {
                this.province = strings[0];
                this.getCity();
                this.cityValue = strings[1];
                this.getDowntown();
                this.downtownValue = strings[2];
                this.exact = strings[3];
            }
        }

    })


</script>
</html>

